<template>
  <basic-dialog :visible="show"
                :title="title"
                :isShowClose="true"
                :isShowBasicFooter="true"
                min-width="480px"
                @close="show = false"
                :loading="submitting"
                @submit="submit"
  >
    <q-form class="q-gutter-md dialog-content margin-t-20" ref="form">
      <div>
        <yz-input v-model="queryParams.application"
                  inputType="select"
                  :rules="[0]"
                  :options="applicationListFilter"
                  title="应用"
                  :is-disable="isEdit"
                  style="width: 440px"
        />
        <div class="content tips">应用描述: {{ applicationDescInfo[queryParams.application] }}</div>
      </div>

      <div>
        <yz-input v-model="queryParams.version"
                  inputType="select"
                  :rules="[0]"
                  :options="versionList"
                  title="版本号"
                  :is-disable="isEdit"
                  style="width: 440px"
        />
        <div class="content tips">版本描述: {{ versionDesc }}</div>
      </div>

      <div>
        <yz-input v-model="queryParams.deviceDriverIds"
                  inputType="select"
                  :rules="[0]"
                  :hint-rule="[val => val.length !== 0 || '请选择驱动']"
                  :options="driverDataList"
                  :multiple="true"
                  title="关联驱动"
                  style="width: 440px"
        />
        <div class="content">注：仅关联驱动下的设备数据可上报到该应用</div>
      </div>
    </q-form>
  </basic-dialog>
</template>
<script>

import { getAppInfo } from '../../../../../boot/miot/plc-list'

export default {
  name: 'application-add-edit-dialog',
  props: {
    driverList: {
      type: Array,
      default: () => []
    },
    bindApp: {
      type: Array,
      default: () => []
    },
    submitting: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      return !this.editApplicationId ? '新增' : '编辑'
    },
    // 版本列表
    versionList () {
      const versionList = this.applicationVersionInfo[this.queryParams.application]
      if (versionList?.length > 0) {
        return versionList.map(item => {
          return {
            label: item.version,
            value: item.version,
            description: item.description,
            config: item.config
          }
        })
      }
      return []
    },
    // 版本描述
    versionDesc () {
      return this.versionList.find(item => item.value === this.queryParams.version)?.description || '--'
    },
    // 版本配置
    versionConfig () {
      return this.versionList.find(item => item.value === this.queryParams.version)?.config || ''
    },
    // 驱动数据列表
    driverDataList () {
      return this.driverList.map(item => ({
        label: item.driverName,
        value: item.id
      }))
    },
    // 应用过滤掉已经选择的
    applicationListFilter () {
      return this.applicationList.filter(item => {
        // 编辑的需要显示
        if (item.value === this.editApplicationId) {
          return true
        }
        // 其他的直接过滤掉
        return this.bindApp.findIndex(bind => bind.applicationID + '' === item.value + '') === -1
      })
    },
    // 是否为编辑
    isEdit () {
      return !!this.editApplicationId
    }
  },
  data () {
    return {
      show: false,
      applicationList: [],
      applicationVersionInfo: {},
      applicationDescInfo: {},
      queryParams: {
        application: '',
        version: '',
        deviceDriverIds: []
      },
      editApplicationId: ''
    }
  },
  created () {
    getAppInfo().then(res => {
      const resData = res.data
      if (resData) {
        // 获取所用应用id
        this.applicationList = resData.map(item => {
          this.applicationDescInfo[item.applicationID] = item?.description || '--'
          this.applicationVersionInfo[item.applicationID] = item?.versionList || []
          return {
            label: item.applicationName,
            value: item.applicationID,
            description: item.description,
            versionList: item.versionList || []
          }
        })
      }
    })
  },
  watch: {
    'queryParams.application': {
      handler (val) {
        if (val) {
          if (this.versionList.length > 0 && !this.queryParams.version) {
            this.queryParams.version = this.versionList[0].value
          } else if (!this.isEdit) {
            this.queryParams.version = ''
          }
        }
      }
    }
  },
  methods: {
    showDialog (info) {
      if (info) {
        this.queryParams.application = info.application
        this.queryParams.version = info.version
        this.queryParams.deviceDriverIds = info.deviceDriverIds
        this.editApplicationId = info.application
      } else {
        Object.assign(this.queryParams, this.$options.data.call(this).queryParams)
        // 如果是新增，全选所有驱动
        this.queryParams.deviceDriverIds = this.driverDataList.map(item => item.value)
        this.editApplicationId = ''
      }
      this.show = true
    },
    hideDialog () {
      this.show = false
    },
    // 提交
    submit () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          const data = {
            isEdit: this.isEdit,
            applicationID: this.queryParams.application,
            applicationName: this.applicationList.find(item => item.value === this.queryParams.application)?.label,
            deviceDriverIds: this.queryParams.deviceDriverIds,
            version: this.queryParams.version,
            config: this.versionConfig
          }
          this.$emit('submit', data)
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.content {
  margin-left: 88px;
  font-size: 12px;
}

.tips {
  width: 352px;
  padding: 12px;
  background: #f3f3f3;
  border-radius: 5px;
}
</style>
